import React, { useState, useEffect } from 'react'
import axios from 'axios'
import { publicIp } from '@/services/apiIp'
const ImageWithTokenlist = ({ src, token, key }) => {
  const [imageSrc, setImageSrc] = useState('')
  useEffect(() => {
    const fetchImage = async () => {
      try {
        const response = await axios({
          method: 'GET',
          url: publicIp + '/' + src, // 你的图片资源URL
          headers: {
            'Content-Type': 'application/json',
            Authorization: 'token ' + sessionStorage.getItem('token'), // 设置token
            token: sessionStorage.getItem('token') || '',
          },
          responseType: 'blob', // 设置响应类型为blob
        })
        const imageBlob = new Blob([response.data], { type: 'image/jpeg' })
        const imageUrl = URL.createObjectURL(imageBlob)
        setImageSrc(imageUrl)
      } catch (error) {
        console.error('Error fetching image:', error)
      }
    }

    fetchImage()
  }, [token])

  return (
    <img
      style={{
        width: '80px',
      }}
      src={imageSrc}
    />
  )
}

export default ImageWithTokenlist
